<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片跟着鼠标移动</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    ul li {
        list-style-type: none;
    }
    
    ul li {
        width: 100px;
        height: 50px;
        border: 1px solid rosybrown;
    }
    
    img {
        position: absolute;
        top: 2px;
    }
</style>

<script>
    $(function() {
            $(document).mousemove(function(e) {
                e = e || windows.e;
                var x = e.pageX;
                var y = e.pageY;
                $("img").css("left", x - 50 + "px");
                $("img").css("top", y - 50 + "px");
            });
            $("ul").click(function(e) {
                e = e || windows.e;
                $(e.target).css("backgroundColor", "red");
            })
        }

    )
</script>

<body>
    <img src="images/angel.gif" alt="">
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

</html>